<!--报表生成-->
<template>
<div>
<div class="table">
		
        <div>
			<row>
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">填报级别:</label>
					<Select  placeholder="请选择" class="searchInput" v-model="ReportModel.ReportLevel" :label-in-value="true">
                        <Option v-for="item in ReportLevelList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>	
                </Col>
				<Col :lg="{span:6}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">报表名称:</label>
					<Select  placeholder="请选择报表" class="searchInput" v-model="ReportModel.TableCode" :label-in-value="true" style="width: 220px">
                        <Option v-for="item in ReportNameList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>		
                </Col>
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">上报年度:</label>
					<Select  placeholder="请选择" class="searchInput" v-model="ReportModel.CreateYear">
                        <Option v-for="item in ReportYearList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>		
                </Col>
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">时间周期:</label>
					<Select  placeholder="请选择" class="searchInput"  v-model="ReportModel.Cycle">
						<Option v-for="item in ReportCycleList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>			
                </Col>
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}" v-show="ReportModel.Cycle == 12">
					<label class="searchLabel">周期值:</label>
					<Select  placeholder="请选择" class="searchInput"  v-model="ReportModel.CycleValue">
						<Option v-for="item in MonthCycleList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>									
				</Col>
				<Col :lg="{span:5}" :md="{span:4}" :sm="{span:8}" :xs="{span:20}" v-show="ReportModel.Cycle == 4" >
					<label class="searchLabel">周期值:</label>
					<Select  placeholder="请选择" class="searchInput"  v-model="ReportModel.CycleValue">
						<Option v-for="item in QuarterCycleList" :value="item.DictValue" :key="item.DictValue">{{ item.DictText }}</Option>
					</Select>									
				</Col>
                <Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
					<Button type="primary"   @click="CreateReport" class="searchButton">
						<span>生成报表</span>
					</Button>
				</Col>     
			</row>
		</div>	
		<div class="divSearch">
			<Row>
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<!--根据需求删除不不要查询条件-->
					<label class="searchLabel">填报年度:</label>
					<Select v-model="searchModel.CreateYear" class="searchInput" placeholder="全部"  @on-change="initTableData()">
						<Option value="">全部</Option>
						<Option :value="item.DictValue" v-for="item in ReportYearList" :key="item.DictValue">{{item.DictText}}</Option>
					</Select>
				</Col>
				<Col :lg="{span:6}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">报表名称:</label>
					<Select v-model="searchModel.TableCode" class="searchInput" placeholder="全部" style="width: 220px" @on-change="initTableData()">
						<Option value="">全部</Option>
						<Option :value="item.DictValue" v-for="item in ReportNameList" :key="item.DictValue">{{item.DictText}}</Option>
					</Select>
				</Col>
				<Col :lg="{span:5}" :md="{span:8}" :sm="{span:16}" :xs="{span:22}">
					<label class="searchLabel">时间周期:</label>
					<Select v-model="searchModel.Cycle" class="searchInput" placeholder="全部"  @on-change="initTableData()">
						<Option value="">全部</Option>
						<Option :value="item.DictValue" v-for="item in ReportCycleList" :key="item.DictValue">{{item.DictText}}</Option>
					</Select>
				</Col>
				<Col :lg="{span:2}" :md="{span:2}" :sm="{span:2}" :xs="{span:2}">
					<Button icon="ios-search" type="primary" @click="initTableData()" class="searchButton">查询</Button>
				</Col>
        	</Row>
		</div>	
	    <row><!--数据表格-->
		    <Col>
			    <i-table :context="self" ref="table" :stripe=true :columns="columnsData"  border
				:data="tabledata" size="large" @on-select-all="selectAll()" @on-select="selectSingel()" :height="clientHeight">
			    </i-table>
		    </Col>
	    </row>
	    <row><!--分页插件-->	   
			    <Col>
					 <!-- <spin size="large"></spin> -->
			    	 <Page class="pageComponent" :total="tableTotal" show-elevator show-sizer show-total placement="top" 
					  @on-change="changePage" @on-page-size-change="changePageSize"
					  :page-size-opts='pageSizeOpts' :page-size="20"></Page>
			    </Col>
	    </row>
    </div>
</div>
</template>
<script>
export default {
	data(){
		return {
			self:this,
			tableTotal:0,//表格记录条数
	        ShowModal:false,//modal开关,针对form填报表格
	        tabledata:[],	//页面表格数据
			ReportLevelList: this.GetGroupDict("ReportLevel"),//填报级别	
			ReportNameList: this.GetGroupDict("ReportTableName"),//表名称
            ReportYearList:this.GetGroupDict("ReportYear"),//上报年度列表
            ReportCycleList:this.GetGroupDict("ReportCycle"),//上报周期列表
			MonthCycleList:this.GetGroupDict("MonthCycleValue"),//月份周期值
			QuarterCycleList:this.GetGroupDict("QuarterCycleValue"),//月份周期值
			clientHeight:window.innerHeight-380,//设置表格高度
			pageSizeOpts:[20,40,50],
	        columnsData:[
				// {type: 'selection',width: 60,align: 'center'},
	            {title:'报表名称',key:'TableName'},
				// {title:'上报年度',key:'CreateYearName',width: 200},
	            // {title:'时间周期',key:'CycleName',width: 200},
	            // {title:'报表编号',key:'TableCode',width: 200},
	            {title:'添加时间',key:'StrCreateTime',width:200},
                // {title: '操作',key: 'action',width: 200,align: 'center',render (row, column, index) {
	            // return ` <i-button   @click="Remove('${row.Id}')"  disable="isDelete"><Icon type="ios-trash-outline" color="#FF0000" size=16></Icon>&nbsp;删除</i-button>`;
	            //     }
	            //         }
				{title: '操作',key: 'action',width: 200,align: 'center',
					render:(h,params)=>{
						return h('div', [
											h('Button', { class:{ideleteColor:true},props: {type:'ghost',size:'small',icon:'ios-trash-outline'},on: {click: () => {this.Remove(params.row.Id); }}}, '删除')])
	                }
				}
            ],
            // NameCode:{label:'',value:''},
            ReportModel:{
                TableName:'',
                TableCode:'',
                CreateYear:'',
                Cycle:'',
				CycleValue:'',
				ReportLevel: '1'
            },
			//查询模型：根据需求删除不不要查询条件
            searchModel: {
                Id: '',
                TableName: '',
                TableCode: '',
                CreateYear: '',
                Cycle: '',
                CreateTime: '',
                PageNumber: 1, PageSize: 20
            },
		}
	},
	mounted:function(){
        const that = this;
        window.onresize = () => {
            return (() => {
                that.clientHeight = window.innerHeight-380;
            })()
        };

    },
	methods:{
		//生成报表
		CreateReport:function(){
			var self = this;
			self.$http.post('GenerateLog',this.ReportModel).then(function(res){
				if(res.data){
					self.$Notice.success({title: '报表生成成功'});
					self.initTableData();
				}else{
					self.$Notice.error({title:res.data.message});
				}
			});
		},
        initTableData:function(){//初始化表格数据
            var self=this;
            this.$http.post('GenerateLog/PostPageList',this.searchModel).then(function(res){
                if(res.data.status===1)
                {
                    self.tabledata=res.data.rows;
					self.tableTotal=res.data.total;
                }else{
					self.$Modal.error({ title: '提示信息', content: res.data.message });
				}
            });
        },
        Remove:function(id){
            var self = this;
            self.$Modal.confirm({
                title: '提示信息',
                content: '<p>数据删除后不可恢复，确定要删除？</p>',
                onOk: () => {
                    this.$http.delete("GenerateLog", { params: { id: id } }).then(
                        function (res) {
                            if (res.data.status == 1) {
                                self.$Notice.success({ title: '删除成功！', desc: false });
                                self.initTableData();
                            }
                            else {
                                self.$Modal.error({ title: "提示信息", content: "数据删除失败!!!" });
                            }
                        }
                    );
                }
            });
        },
        changePage:function(pageIndex){//改变页码事件
			this.searchModel.PageNumber = pageIndex;
            this.initTableData();
        },
        changePageSize:function(pageSize){//改变页面记录条数事件
			this.searchModel.PageSize = pageSize;
            this.initTableData();
        }
    },
    created:function(){ //初始化函数
        this.initTableData();
    },
    watch:{
    }
}
</script>